<template>
  <!--订单管理模块-->
  <div>
    <basic-container v-show="!isComment">
      <cs-filter-query ref="csFilterQueryRef" :options="filterQueryOptions"
                       @change="handleChangeFilter" id="ContainerTopCsQueryById-T"></cs-filter-query>
      <!--<beetles-search :size="'mini'" @search-form="searchForm" @empty-form="emptyForm" :expend="false">-->
      <!--  <div class="beetles-search-from" slot-scope="{searchConceal}" slot="searchForm"-->
      <!--       :style="{height:searchConceal? 'auto' :'40px'}" style="overflow:hidden">-->
      <!--    <el-form ref="form" :model="queryForm" :inline="true" :rules="rules" label-width="100px"-->
      <!--             @submit.native.prevent>-->
      <!--      <el-form-item label="订单名称:">-->
      <!--        <el-input-->
      <!--          id="id-business-offer-searchForm-two"-->
      <!--          placeholder="请输入订单名称"-->
      <!--          v-model="queryForm.name"-->
      <!--          clearable-->
      <!--          size="mini"-->
      <!--          @keyup.enter.native="searchForm">-->
      <!--        </el-input>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="订单ID:" prop="id">-->
      <!--        <el-input id="id-business-offer-searchForm" placeholder="请输入订单ID" size="mini" style="height:24px;"-->
      <!--                  v-model="queryForm.id" clearable-->
      <!--                  @keyup.enter.native="searchForm">-->
      <!--        </el-input>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="客户:">-->
      <!--        <el-input-->
      <!--          id="id-business-offer-searchForm-three"-->
      <!--          placeholder="请输入客户"-->
      <!--          v-model="queryForm.customerName"-->
      <!--          clearable-->
      <!--          size="mini"-->
      <!--          @keyup.enter.native="searchForm">-->
      <!--        </el-input>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="客户等级:" v-show="$store.getters.userInfo.is_agency !== 0">-->
      <!--        <el-select id="id-business-offer-queryForm-sharedUserId" v-model="queryForm.customerLevel" clearable-->
      <!--                   filterable size="mini" placeholder="请选择客户等级" style="width:100%"-->
      <!--                   ref="sharedUserId" @visible-change="isShowSelectOptions" @change="searchForm">-->
      <!--          <el-option-->
      <!--            v-for="item in customerLevelList"-->
      <!--            :key="item.id"-->
      <!--            :label="item.value"-->
      <!--            :value="item.value">-->
      <!--          </el-option>-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="产品名:">-->
      <!--        <el-input-->
      <!--          id="id-business-offer-queryForm-productName"-->
      <!--          placeholder="请输入产品名"-->
      <!--          v-model="queryForm.productName"-->
      <!--          clearable-->
      <!--          size="mini" @keyup.enter.native="searchForm">-->
      <!--        </el-input>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="状态:">-->
      <!--        <el-select id="id-business-offer-queryForm-status" v-model="queryForm.status" clearable size="mini"-->
      <!--                   placeholder="请选择状态" style="width:100%"-->
      <!--                   ref="offerStatus" @visible-change="isShowSelectOptions" @change="searchForm">-->
      <!--          <el-option-->
      <!--            v-for="item in statusList"-->
      <!--            :key="item.value"-->
      <!--            :label="item.label"-->
      <!--            :value="item.value">-->
      <!--          </el-option>-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="客户经理:">-->
      <!--        <el-select id="id-business-offer-queryForm-customerManager" v-model="queryForm.customerManager" clearable-->
      <!--                   filterable size="mini" placeholder="请选择客户经理" style="width:100%"-->
      <!--                   ref="customerManager" @visible-change="isShowSelectOptions" @change="searchForm">-->
      <!--          <el-option-->
      <!--            v-for="item in userList"-->
      <!--            v-if="item.roleAlias != null && item.roleAlias.split(',').includes('customer_manager')"-->
      <!--            :key="item.id"-->
      <!--            :label="item.realName"-->
      <!--            :value="item.id">-->
      <!--          </el-option>-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="优化师:" v-show="$store.getters.userInfo.is_agency !== 0">-->
      <!--        <el-select id="id-business-offer-queryForm-optimized" v-model="queryForm.optimized" clearable-->
      <!--                   filterable size="mini" placeholder="请选择用户" style="width:100%"-->
      <!--                   ref="sharedUserId" @visible-change="isShowSelectOptions" @change="searchForm">-->
      <!--          <el-option-->
      <!--            v-for="item in userList"-->
      <!--            :key="item.id"-->
      <!--            :label="item.realName"-->
      <!--            :value="item.id">-->
      <!--          </el-option>-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="设计师:" v-show="$store.getters.userInfo.is_agency !== 0">-->
      <!--        <el-select id="id-business-offer-queryForm-designer" v-model="queryForm.designer" clearable-->
      <!--                   filterable size="mini" placeholder="请选择用户" style="width:100%"-->
      <!--                   ref="sharedUserId" @visible-change="isShowSelectOptions" @change="searchForm">-->
      <!--          <el-option-->
      <!--            v-for="item in userList"-->
      <!--            :key="item.id"-->
      <!--            :label="item.realName"-->
      <!--            :value="item.id">-->
      <!--          </el-option>-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="内外订单:">-->
      <!--        <el-select id="id-business-offer-queryForm-sharedUserId" v-model="queryForm.isShared" clearable-->
      <!--                   filterable size="mini" placeholder="请选择用户" style="width:100%"-->
      <!--                   ref="sharedUserId" @visible-change="isShowSelectOptions" @change="searchForm">-->
      <!--          <el-option-->
      <!--            label="内部"-->
      <!--            :value="0">-->
      <!--          </el-option>-->
      <!--          <el-option-->
      <!--            label="外部"-->
      <!--            :value="1">-->
      <!--          </el-option>-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="素材审核:">-->
      <!--        <el-select id="id-business-offer-queryForm-auditCreative" v-model="queryForm.auditCreative" clearable-->
      <!--                   size="mini" placeholder="请选择素材审核" style="width:100%"-->
      <!--                   ref="auditCreative" @visible-change="isShowSelectOptions" @change="searchForm">-->
      <!--          <el-option-->
      <!--            v-for="item in auditCreativeList"-->
      <!--            :key="item.value"-->
      <!--            :label="item.label"-->
      <!--            :value="item.value">-->
      <!--          </el-option>-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="媒体:">-->
      <!--        <el-select id="id-business-offer-queryForm-platforms" v-model="queryForm.platforms"-->
      <!--                   clearable size="mini" placeholder="请选择媒体" style="width:100%"-->
      <!--                   ref="offerPlatform" @visible-change="isShowSelectOptions" @change="searchForm">-->
      <!--          <el-option-->
      <!--            v-for="item in platformList"-->
      <!--            :key="item.dictKey"-->
      <!--            :label="item.dictValue"-->
      <!--            :value="item.dictKey">-->
      <!--          </el-option>-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="操作系统:">-->
      <!--        <el-select id="id-business-offer-queryForm-os" v-model="queryForm.os" clearable size="mini"-->
      <!--                   placeholder="请选择操作系统" style="width:100%"-->
      <!--                   ref="os" @visible-change="isShowSelectOptions" @change="searchForm">-->
      <!--          <el-option-->
      <!--            v-for="item in osList"-->
      <!--            :key="item.value"-->
      <!--            :label="item.label"-->
      <!--            :value="item.value">-->
      <!--          </el-option>-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="销售经理:">-->
      <!--        <el-select id="id-business-offer-queryForm-salesManager" v-model="queryForm.salesManager" clearable-->
      <!--                   filterable size="mini" placeholder="请选择销售经理" style="width:100%"-->
      <!--                   ref="salesManager" @visible-change="isShowSelectOptions" @change="searchForm">-->
      <!--          <el-option-->
      <!--            v-for="item in userList"-->
      <!--            v-if="item.roleAlias != null && item.roleAlias.split(',').includes('sales_manager')"-->
      <!--            :key="item.id"-->
      <!--            :label="item.realName"-->
      <!--            :value="item.id">-->
      <!--          </el-option>-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="创建人:">-->
      <!--        <el-select id="id-business-offer-queryForm-createUser" v-model="queryForm.createUser" clearable-->
      <!--                   filterable=" " size="mini" placeholder="请选择创建人" style="width:100%"-->
      <!--                   ref="offerPlatform" @visible-change="isShowSelectOptions" @change="searchForm">-->
      <!--          <el-option-->
      <!--            v-for="item in userList"-->
      <!--            v-if="item.status == 2 || (item.roleAlias != null && (item.roleAlias.split(',').includes('admin') || item.roleAlias.split(',').includes('operator') || item.roleAlias.split(',').includes('optimizer')))"-->
      <!--            :key="item.id"-->
      <!--            :label="item.realName"-->
      <!--            :value="item.id">-->
      <!--          </el-option>-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="用户:">-->
      <!--        <el-select id="id-business-offer-queryForm-sharedUserId" v-model="queryForm.sharedUserId" clearable-->
      <!--                   filterable size="mini" placeholder="请选择用户" style="width:100%"-->
      <!--                   ref="sharedUserId" @visible-change="isShowSelectOptions" @change="searchForm">-->
      <!--          <el-option-->
      <!--            v-for="item in userList"-->
      <!--            :key="item.id"-->
      <!--            :label="item.realName"-->
      <!--            :value="item.id">-->
      <!--          </el-option>-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="创建时间:">-->
      <!--        <el-date-picker-->
      <!--          v-model="queryForm.createDateRange"-->
      <!--          type="daterange"-->
      <!--          range-separator="至"-->
      <!--          start-placeholder="开始日期"-->
      <!--          value-format="yyyy-MM-dd"-->
      <!--          unlink-panels-->
      <!--          size="mini"-->
      <!--          end-placeholder="结束日期"-->
      <!--          @change="searchForm">-->
      <!--        </el-date-picker>-->
      <!--      </el-form-item>-->
      <!--    </el-form>-->
      <!--  </div>-->
      <!--</beetles-search>-->
      <avue-crud class="beetlesTable" :option="option" :data="data" :table-loading="loading" :page.sync="page"
                 :view-name="'offer'"
                 ref="crud"
                 @search-change="searchChange"
                 @search-reset="searchReset"
                 @selection-change="selectionChange"
                 @current-change="currentChange"
                 @size-change="sizeChange"
                 id="ContentMainColumnMain-T"
                 @refresh-change="refreshChange"
                 @on-load="onLoad(page)"
      >
        <template slot-scope="scope" slot="menuRight">
          <el-tooltip v-if="!(selectionList.length > 0)" effect="dark" content="导出订单" placement="top">
            <el-button icon="el-icon-download" circle size="small" @click="$message.warning('请先勾选要下载的数据')"></el-button>
          </el-tooltip>
          <el-tooltip v-else effect="dark" content="导出订单" placement="top">
            <el-button icon="el-icon-download" circle size="small"
                       @click="handleExport"></el-button>
          </el-tooltip>
        </template>
        <template slot-scope="{row}" slot="status">
          <div>
            <div v-if="row.status !== 3">
              <el-select v-model="row.status" @change="changeStatus($event,row)" size="mini"
                         :disabled="!((roles.admin || permission.offer_edit) && (row.originOfferId === -1)  && (row.status !== 3)) ">

                <el-option v-for="(item,index) in statusTableList()" :key="index" :value="item.value"
                           :label="item.label"
                           :disabled="item.disabled">
                </el-option>
              </el-select>
            </div>
            <div v-if="row.status === 3">
              删除
            </div>
          </div>
        </template>
        <template slot-scope="{row}" slot="name">
          <el-tooltip effect="dark" :content="row.name" placement="top">
            <div v-if="row.status != 0">
              <a href="javascript:void(0)" @click="openOcPage(row,'offer')">{{ row.name }}</a>
            </div>
            <div v-else>{{ row.name }}</div>
          </el-tooltip>

        </template>
        <template slot-scope="{row}" slot="platforms">
          <div style="display: flex;flex-wrap: wrap;">
            <div style="width: 20px;margin-right: 4px"
                 v-for="(item,index) in platformLogo(row.androidPlatform,row.iosPlatform,row.websitePlatform)"
                 :key="index">
              <img style="width: 100%" :src="item.url" :title="item.name">
            </div>
          </div>
        </template>
        <template slot-scope="{row}" slot="os">
          <div>
            <a v-show="row.androidAppUrl !== ''" style="margin-right: 5px;cursor: pointer"
               @click="openUrl(row.androidAppUrl)">
              <img style="width: 20px;height: 20px" src="/img/icon/android.png" alt="android"></a>
            <a v-show="row.iosAppUrl !== ''" style="cursor: pointer" @click="openUrl(row.iosAppUrl)">
              <img style="width: 20px;height: 20px" src="/img/icon/ios.png" alt="os">
            </a>
            <a v-show="row.websiteAppUrl !== '' && row.websiteAppUrl != '-1'" style="cursor: pointer"
               @click="openUrl(row.websiteAppUrl)">
              <img style="width: 20px;height: 20px" src="/img/icon/IE.png" alt="website">
            </a>
          </div>
        </template>
        <template slot-scope="{row}" slot="customerManager">
          <div>{{ getUserNames(row.customerManager) }}</div>
        </template>
        <template slot-scope="{row}" slot="salesManager">
          <div>{{ getUserNames(row.salesManager) }}</div>
        </template>
        <template slot-scope="{row}" slot="createUser">
          <div>{{ getUserNames(row.createUser) }}</div>
        </template>
        <template slot-scope="{row}" slot="opUsers">
          <el-tooltip effect="dark" :content="findOpUsers(row.opUsers)" placement="top">
            <span>{{ findOpUsers(row.opUsers) }}</span>
          </el-tooltip>
        </template>
        <template slot-scope="{row}" slot="designers">
          <el-tooltip effect="dark" :content="findDesigners(row.designers)" placement="top">
            <span>{{ findDesigners(row.designers) }}</span>
          </el-tooltip>
        </template>
        <template slot-scope="{row}" slot="remark">
          <el-tooltip effect="dark" :content="row.remark" placement="top">
            <span>{{ row.remark }}</span>
          </el-tooltip>
        </template>
        <template slot-scope="{row}" slot="customerLevel">
          <el-button v-if="row.customerLevel" :class="row.customerLevel" size="mini" circle style="cursor: default">
            {{ row.customerLevel }}
          </el-button>
        </template>
        <template slot="search" slot-scope="{size}">
          <div style="width:300px;display: flex;">
            <div style="margin-right: 5%;margin-left:5%;width: 12%; height: 32px;line-height: 32px; "> 状态:</div>
            <el-select :size="size" v-model="search.status" clearable>
              <el-option v-for="(item,index) in statusList" :key="index" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>

        </template>
        <template slot="menuLeft">
          <!--<el-button type="success"-->
          <!--           size="small"-->
          <!--           icon="el-icon-download"-->
          <!--           plain-->
          <!--           :disabled="!(selectionList.length > 0)"-->
          <!--           @click="handleExport">导 出-->
          <!--</el-button>-->
          <el-button type="primary"
                     size="small"
                     plain
                     v-if="roles.admin|| permission.offer_add"
                     @click="handleAdd">新增订单
          </el-button>
          <el-button type="danger"
                     size="small"
                     plain
                     v-if="roles.admin|| permission.offer_delete"
                     :disabled="deletableSelectedList.length == 0"
                     @click="handleDelete">删除订单
          </el-button>
          <el-button type="success"
                     size="small"
                     icon="el-icon-s-promotion"
                     plain
                     v-if="roles.admin || permission.offer_share"
                     @click="handleShare">订单分享
          </el-button>
          <el-badge v-if="(roles.admin|| roles.operator) && userInfo.is_agency === 1" :value="confictedOfferNum"
                    class="item">
            <el-button type="danger"
                       size="small"
                       icon="el-icon-suitcase"
                       plain
                       v-if="(roles.admin|| roles.operator) && userInfo.is_agency === 1"
                       @click="handleFixConflict">订单冲突处理
            </el-button>
          </el-badge>
          <el-button
            v-if="(roles.admin|| roles.designer_manager)"
            :disabled="!(selectionList != null && selectionList.length == 1)"
            type="warning"
            size="small"
            plain
            @click="openTagsModel"
          >
            标签模板
          </el-button>
          <el-button
            type="warning"
            size="small"
            plain
            @click="showPricingCfg"
          >
            定价配置
          </el-button>
        </template>
        <template slot-scope="{type,size,row}" slot="menu">
          <el-tooltip content="查看" placement="top">
            <el-button size="small" icon="el-icon-view" type="text" @click="showComment(row, '1')"></el-button>
          </el-tooltip>
          <el-tooltip content="评论" placement="top">
            <el-button size="small" icon="el-icon-chat-dot-round" type="text"
                       @click="showComment(row, '5')"></el-button>
          </el-tooltip>
          <span style="padding-left: 10px;"></span>
          <el-tooltip content="编辑" placement="top">
            <el-button icon="el-icon-edit" type="text" @click="editRow(row)"
                       :disabled="!((roles.admin|| permission.offer_edit)&&row.originOfferId === -1  && (row.status !== 3))"></el-button>
          </el-tooltip>
          <el-tooltip content="复制" placement="top">
            <el-button icon="el-icon-copy-document" type="text" @click="copyRow(row)"
                       :disabled="!((roles.admin|| permission.offer_edit)&&row.originOfferId === -1  && (row.status !== 3))"></el-button>
          </el-tooltip>
          <span style="padding-left: 10px;"></span>
          <el-tooltip content="通知配置" placement="top">
            <el-button icon="el-icon-setting" type="text" @click="noticeConf(row)"
                       :disabled="!(roles.admin || roles.agc_customer_manager || roles.optimizer)"></el-button>
          </el-tooltip>
          <span style="padding-left: 10px;"></span>
          <el-tooltip content="删除" placement="top">
            <el-button icon="el-icon-delete" type="text" @click="rowDel(row)"
                       :disabled="!((roles.admin|| permission.offer_delete) && (row.status !== 1 && row.status !== 3))"></el-button>
          </el-tooltip>
        </template>
      </avue-crud>
      <offer-edit :title="offerDialogType" :offerStatus="offerStatus" :dialogVisible="offerDialogOpen"
                  :dataList="editList" @close-dialog="closeOfferDialog" :confirm-to-share="confirmToShare" :isTenantIds="isTenantIds"></offer-edit>

      <!--  订单冲突弹窗  -->
      <offer-conflict-edit :dialogVisible="conflictDialogOpen"
                           @close-dialog="conflictCloseDialog"
                           @count-conflicted-offer="countConflictedOffer"></offer-conflict-edit>

      <!-- 通知配置弹窗 -->
      <template-conf :dialogVisible="templateAdd" @closeAddDialog="closeAddDialog"
                     :offerID="offerId" @allNotice="allNotice"
                     :globalConf="globalConf" :globalSwitch="globalSwitch"></template-conf>
      <div newPageLink></div>
      <el-drawer
        title="订单分享"
        size="80%"
        :visible.sync="shareDialog"
        :modal-append-to-body="false"
        :close-on-click-modal="false"
        :append-to-body="true"
        ref="drawer"
      >
        <el-divider></el-divider>
        <div class="drawer__content">
          <share-re v-if="shareDialog" :offer-id="this.selectionList[0].id" ref="shareRef"></share-re>
          <div class="drawer__footer">
            <el-button type="primary" size="mini" @click="saveShare">保存</el-button>
            <el-button size="mini" @click="shareDialog=false">取消</el-button>
          </div>
        </div>
      </el-drawer>
    </basic-container>

    <!--    操作按钮页面-->
    <div class="comment-detail-wrapper" v-show="isComment" v-if="isComment">
      <!--      左侧导航栏-->
      <div class="comment-detail-wrapper-left">
        <basic-container>
          <div class="comment-left">
            <div class="commemt-menu-item">
              <el-radio v-model="commentMenu" label="1">订单信息</el-radio>
            </div>
            <div class="commemt-menu-item">
              <el-radio v-model="commentMenu" label="2">APP</el-radio>
            </div>
            <div class="commemt-menu-item">
              <el-radio v-model="commentMenu" label="3">分享用户&nbsp;{{
                  offerUserTotal
                }}
              </el-radio>
            </div>
            <div class="commemt-menu-item">
              <el-radio v-model="commentMenu" label="4">账户&nbsp;{{
                  offerAccountTotalForMenu
                }}
              </el-radio>
            </div>
            <div class="commemt-menu-item">
              <el-radio v-model="commentMenu" label="6">
                外部分享&nbsp;{{ offerAccountOuterList.length }}
              </el-radio>
            </div>
            <div class="commemt-menu-item">
              <el-radio v-model="commentMenu" label="5">评论&nbsp;{{
                  commentsTotalForMenu
                }}
              </el-radio>
            </div>
            <div class="commemt-menu-item">
              <el-radio v-model="commentMenu" label="7">定价变更记录&nbsp;
              </el-radio>
            </div>
          </div>
        </basic-container>
      </div>
      <!--      右侧内容-->
      <div class="comment-detail-wrapper-right">
        <basic-container>
          <div slot="header" class="card-header">
            <div class="detail-top">
              <span>{{ currentRow.name }}</span>
              <el-button v-if="currentRow.customerLevel" :class="currentRow.customerLevel" size="mini" circle
                         style="cursor: default">
                {{ currentRow.customerLevel }}
              </el-button>
              <el-tag type="success">{{ currentRow.status | filterStatus }}</el-tag>
              <template v-if="commentMenu ==='5'">
                <el-checkbox v-model="lookPin" @change="showPin">只看Pin</el-checkbox>
                <el-link type="danger" @click="showCommentInput">我要评论</el-link>
              </template>
            </div>
            <i class="el-icon-close" @click="backToMain" style="cursor: pointer"></i>
          </div>
          <div class="comment-right">
            <div class="comment-detail" v-show="commentMenu === '1'">
              <el-row :gutter="20">
                <el-col :span="4" class="detail-item-title"><span>订单ID</span></el-col>
                <el-col :span="8"><span>{{ currentRow.id }}</span></el-col>
                <el-col :span="4" class="detail-item-title"><span>客户</span></el-col>
                <el-col :span="8"><span>{{ currentRow.customerName }}</span></el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="4" class="detail-item-title"><span>产品名</span></el-col>
                <el-col :span="8"><span>{{ currentRow.productName }}</span></el-col>
                <el-col :span="4" class="detail-item-title"><span>广告主审核素材</span></el-col>
                <el-col :span="8">
                  <el-tag size="mini" :type="currentRow.auditCreative ===1 ?'success':'danger'">
                    {{ currentRow.auditCreative | filterAuditCreative }}
                  </el-tag>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="4" class="detail-item-title"><span>内外订单</span></el-col>
                <el-col :span="8"><span>{{ currentRow.isShared | filterIsShared }}</span></el-col>
                <el-col :span="4" class="detail-item-title"><span>创建时间</span></el-col>
                <el-col :span="8"><span>{{ currentRow.createTime }}</span></el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="4" class="detail-item-title"><span>操作系统</span></el-col>
                <el-col :span="8">
                    <span>
                      <a v-show="currentRow.androidAppUrl !== ''" style="margin-right: 5px;cursor: pointer"
                         @click="openUrl(currentRow.androidAppUrl)">
                        <img style="width: 20px;height: 20px" src="/img/icon/android.png" alt="android"></a>
                      <a v-show="currentRow.iosAppUrl !== ''" style="cursor: pointer"
                         @click="openUrl(currentRow.iosAppUrl)">
                        <img style="width: 20px;height: 20px" src="/img/icon/ios.png" alt="os">
                      </a>
                      <a v-show="currentRow.websiteAppUrl !== '' && currentRow.websiteAppUrl != '-1'"
                         style="cursor: pointer"
                         @click="openUrl(currentRow.websiteAppUrl)">
                        <img style="width: 20px;height: 20px" src="/img/icon/IE.png" alt="website">
                      </a>
                    </span>
                </el-col>
                <el-col :span="4" class="detail-item-title"><span>媒体</span></el-col>
                <el-col :span="8">
                  <div style="display: flex;flex-wrap: wrap;">
                    <div style="width: 20px;margin-right: 4px"
                         v-for="(item,index) in platformLogo(currentRow.androidPlatform,currentRow.iosPlatform,currentRow.websitePlatform)"
                         :key="index">
                      <img style="width: 100%" :src="item.url" :title="item.name">
                    </div>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="4" class="detail-item-title" v-if="isTenantIds"><span>团队</span></el-col>
                <el-col :span="8" v-if="isTenantIds">
                  <el-tag type="info" >{{ currentRow.$createDept }}</el-tag>
                </el-col>
                <el-col :span="4" class="detail-item-title"><span>客户经理</span></el-col>
                <el-col :span="8">
                  <cs-multiple-tags type="info" :tags-text="currentRow._customerManager"></cs-multiple-tags>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="4" class="detail-item-title"><span>销售经理</span></el-col>
                <el-col :span="8">
                  <cs-multiple-tags type="info" :tags-text="currentRow._salesManager"></cs-multiple-tags>
                </el-col>
                <el-col :span="4" class="detail-item-title"><span>创建人</span></el-col>
                <el-col :span="8">
                  <cs-multiple-tags type="info" :tags-text="currentRow._createUser"></cs-multiple-tags>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="4" class="detail-item-title"><span>优化师</span></el-col>
                <el-col :span="8">
                  <cs-multiple-tags type="info" :tags-text="currentRow._opUsers"></cs-multiple-tags>
                </el-col>
                <el-col :span="4" class="detail-item-title"><span>设计师</span></el-col>
                <el-col :span="8">
                  <cs-multiple-tags type="info" :tags-text="currentRow._designers"></cs-multiple-tags>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="4" class="detail-item-title"><span>备注</span></el-col>
                <el-col :span="20">
                  <el-input
                    type="textarea"
                    disabled
                    :autosize="{ minRows: 2}"
                    v-model="currentRow.remark">
                  </el-input>
                </el-col>
              </el-row>
            </div>
            <div class="comment-detail" v-show="commentMenu === '2'">
              <el-row :gutter="20" v-if="currentRow.androidAppId !== -1">
                <el-col :span="4" class="detail-item-title"><strong>Android</strong></el-col>
                <el-col :span="20">&nbsp;</el-col>
                <el-col :span="4" class="detail-item-title">商店URL:</el-col>
                <el-col :span="20">
                  <el-input size="mini" disabled :value="currentRow.androidAppUrl"></el-input>
                </el-col>
                <el-col :span="4" class="detail-item-title">投放地区:</el-col>
                <el-col :span="8">
                  <el-input size="mini" disabled :value="filterNation(currentRow.androidNation)"></el-input>
                </el-col>
                <el-col :span="4" class="detail-item-title">媒体:</el-col>
                <el-col :span="8">
                  <el-input size="mini" disabled :value="filterPlatfrom(currentRow.androidPlatform)"></el-input>
                </el-col>
              </el-row>
              <el-row :gutter="20" v-if="currentRow.iosAppId !== -1">
                <el-col :span="4" class="detail-item-title"><strong>ios</strong></el-col>
                <el-col :span="20">&nbsp;</el-col>
                <el-col :span="4" class="detail-item-title">商店URL:</el-col>
                <el-col :span="20">
                  <el-input size="mini" disabled :value="currentRow.iosAppUrl"></el-input>
                </el-col>
                <el-col :span="4" class="detail-item-title">投放地区:</el-col>
                <el-col :span="8">
                  <el-input size="mini" disabled :value="filterNation(currentRow.iosNation)"></el-input>
                </el-col>
                <el-col :span="4" class="detail-item-title">媒体:</el-col>
                <el-col :span="8">
                  <el-input size="mini" disabled :value="filterPlatfrom(currentRow.iosPlatform)"></el-input>
                </el-col>
              </el-row>
              <el-row :gutter="20" v-if="currentRow.websiteAppId !== -1">
                <el-col :span="4" class="detail-item-title"><strong>website</strong></el-col>
                <el-col :span="20">&nbsp;</el-col>
                <el-col :span="4" class="detail-item-title">商店URL:</el-col>
                <el-col :span="20">
                  <el-input size="mini" disabled :value="currentRow.websiteAppUrl"></el-input>
                </el-col>
                <el-col :span="4" class="detail-item-title">投放地区:</el-col>
                <el-col :span="8">
                  <el-input size="mini" disabled :value="filterNation(currentRow.websiteNation)"></el-input>
                </el-col>
                <el-col :span="4" class="detail-item-title">媒体:</el-col>
                <el-col :span="8">
                  <el-input size="mini" disabled :value="filterPlatfrom(currentRow.websitePlatform)"></el-input>
                </el-col>
              </el-row>
            </div>
            <div class="comment-detail" v-show="commentMenu === '3'">
              <el-table
                :data="offerUserList"
                border
                style="width: 100%"
                @row-click="handleClickOfferUserRow">
                <el-table-column
                  prop="userName"
                  label="用户名">
                </el-table-column>
                <el-table-column
                  prop="roleName"
                  label="角色">
                </el-table-column>
                <el-table-column
                  prop="accountCount"
                  label="账户">
                </el-table-column>
                <el-table-column
                  prop="permission"
                  label="权限">
                  <template v-slot="{row}">
                    <cs-multiple-tags v-if="row.permission !== '0'" size="mini" type="info"
                                      :tags-text="transformUserPermission(row.permission)"></cs-multiple-tags>
                    <!--<el-tag v-if="row.permission !== '0'" type="info" size="mini">{{ transformUserPermission(row.permission)}}</el-tag>-->
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination
                class="my-pagination clearfix"
                @size-change="handleOfferUserSizeChange"
                @current-change="handleOfferUserCurrentChange"
                :current-page="offerUserPage.current"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="offerUserPage.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="offerUserTotal">
              </el-pagination>
            </div>
            <div class="comment-detail" v-show="commentMenu === '4'">
              <el-form :inline="true" :model="queryOfferAccountForm" class="demo-form-inline">
                <el-form-item label="账户名称">
                  <el-input size="mini" v-model="queryOfferAccountForm.name"
                            @input="inputGetOfferAccountList"></el-input>
                </el-form-item>
                <el-form-item label="账户ID">
                  <el-input size="mini" v-model="queryOfferAccountForm.platformId"
                            @input="inputGetOfferAccountList"></el-input>
                </el-form-item>
                <el-form-item label="账户运营人">
                  <el-select clearable filterable size="mini" placeholder="请选择账户运营人" style="width:100%"
                             v-model="queryOfferAccountForm.operator" @change="getOfferAccountList">
                    <el-option
                      v-for="item in userList"
                      :key="item.id"
                      :label="item.realName"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-form>
              <el-table
                :data="offerAccountList"
                border
                style="width: 100%">
                <el-table-column
                  prop="name"
                  label="账户名称">
                </el-table-column>
                <el-table-column
                  prop="platformId"
                  label="账户ID">
                </el-table-column>
                <el-table-column
                  prop="operatorName"
                  label="账户运营人">
                </el-table-column>
              </el-table>
              <el-pagination
                class="my-pagination clearfix"
                @size-change="handleOfferAccountSizeChange"
                @current-change="handleOfferAccountCurrentChange"
                :current-page="offerAccountPage.current"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="offerAccountPage.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="offerAccountTotal">
              </el-pagination>
            </div>
            <div class="comment-detail" v-show="commentMenu === '5'">
              <!--评论a-->
              <div class="comment-box">
                <div class="comment-opt" v-show="isShowCommentInput">
                  <el-form :model="commentForm" class="comment-form" ref="commentFormRef" :rules="commentRules"
                           :inline-message="true">
                    <el-form-item id="c-content" prop="content">
                      <el-input
                        type="textarea"
                        ref="commentInput"
                        :autosize="{ minRows: 5,maxRows: 5}"
                        :placeholder="this.commentForm.level === 'REPLY'? '回复此条评论：':'请输入新的评论：'"
                        v-model="commentForm.content">
                      </el-input>
                      <div style="float: right;color: #00a2ff;cursor: pointer" @click="isShowCommentInput = false">
                        收起评论输入框<i class="el-icon-caret-top"></i></div>
                    </el-form-item>
                    <el-form-item id="c-btn">
                      <el-button type="primary" :loading="submitLoading" @click="submitComment">发布</el-button>
                    </el-form-item>
                  </el-form>
                </div>
                <div class="comment-search">
                  <el-form :inline="true" :model="commentSearchForm" class="demo-form-inline">
                    <el-form-item label="评论者">
                      <el-input size="mini" v-model="commentSearchForm.createUsers" placeholder="请输入评论者"
                                clearable></el-input>
                    </el-form-item>
                    <el-form-item label="评论时间">
                      <el-date-picker
                        size="mini"
                        v-model="commentSearchForm.commentSearchDate"
                        type="daterange"
                        align="right"
                        value-format="yyyy-MM-dd"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                      </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                      <el-button size="mini" type="primary" @click="getCommentPage">查询</el-button>
                      <el-button size="mini" @click="resetComment">重置</el-button>
                    </el-form-item>
                  </el-form>
                </div>
                <div v-if="commentsData.length===0" style="text-align: center;color: #00a2ff">暂无数据！</div>
                <div class="comment-msg" v-loading="commentLoading">
                  <cs-comment-list :reflesh-page="this.getCommentPage" :offerId="currentRow.id" :data="commentsData"
                                   @pin="changePin" @reply="chooseReply"
                                   @load="loadCommit" @del="delCommit" @edit="editCommit"></cs-comment-list>

                  <el-dialog
                    title="编辑评论"
                    :visible.sync="editdialogVisible"
                    width="30%"
                    append-to-body>
                    <span>
                       <el-input
                         type="textarea"
                         :autosize="{ minRows: 3}"
                         v-model="editContent">
                      </el-input>
                    </span>
                    <span slot="footer" class="dialog-footer" id="FooterButtonFodyOne-T">
                      <el-button @click="editdialogVisible = false">取 消</el-button>
                      <el-button type="primary" @click="updateContent">确 定</el-button>
                    </span>
                  </el-dialog>

                </div>
              </div>
            </div>
            <div class="comment-detail" v-show="commentMenu === '6'" id="ContainersTableListOne-T">
              <el-form :model="shareMenuForm">
                <el-form-item>
                  <el-checkbox-group v-model="shareMenuForm.checkedMenu">
                    <el-checkbox disabled v-for="menu in shareMenuList" :label="menu.id" :key="menu.id">{{
                        menu.value
                      }}
                    </el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-form>
              <el-table
                :data="offerAccountOuterList"
                border
                style="width: 100%"
                height="60vh">
                <el-table-column
                  prop="name"
                  label="账户名称">
                </el-table-column>
                <el-table-column
                  prop="accountId"
                  label="账户ID">
                </el-table-column>
                <el-table-column
                  prop="permission"
                  label="权限">
                  <template v-slot="{row}">
                    <cs-multiple-tags size="mini" type="info"
                                      :tags-text="transformUserAccountPermission(row.permission)"></cs-multiple-tags>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="comment-detail" v-show="commentMenu === '7'">
              <div class="pricing-show-title">当前定价配置</div>
              <el-table
                :data="pricingPageData"
                style="width: 100%"
              >
                <el-table-column
                  type="index"
                  label="#">
                </el-table-column>
                <el-table-column
                  prop="platform"
                  label="媒体">
                  <template v-slot="{row, column, $index}">
                    <el-select size="mini" v-model="row.platform" placeholder="请选择" filterable multiple clearable
                               disabled>
                      <el-option
                        v-for="item in platformList"
                        :key="item.dictKey"
                        :label="item.dictValue"
                        :value="item.dictKey">
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="country"
                  label="国家">
                  <template v-slot="{row, column, $index}">
                    <el-select size="mini" v-model="row.country" placeholder="请选择" filterable multiple clearable
                               disabled>
                      <el-option
                        v-for="item in nationList"
                        :key="item.geoKey"
                        :label="item.cnName"
                        :value="item.geoKey">
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="os"
                  label="操作系统">
                  <template v-slot="{row, column, $index}">
                    <el-select size="mini" v-model="row.os" placeholder="请选择" filterable multiple clearable disabled>
                      <el-option
                        v-for="item in osList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="priceType"
                  label="合作模式">
                  <template v-slot="{row, column, $index}">
                    <el-select size="mini" v-model="row.priceType" placeholder="请选择" filterable clearable disabled>
                      <el-option
                        v-for="item in coopList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="price"
                  label="定价">
                  <template v-slot="{row, column, $index}">
                    <el-input size="mini" v-model="row.price" placeholder="请输入定价" disabled></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="startDate"
                  label="生效日期">
                  <template v-slot="{row, column, $index}">
                    <el-date-picker
                      size="mini"
                      v-model="row.startDate"
                      type="date"
                      value-format="yyyy-MM-dd"
                      disabled
                      placeholder="选择日期">
                    </el-date-picker>
                  </template>
                </el-table-column>
              </el-table>
              <div class="pricing-pages">
                <el-pagination
                  background
                  @size-change="handlePricingCfgSizeChange"
                  @current-change="handlePricingCfgCurrentChange"
                  :page-sizes="[10, 20, 50, 100]"
                  :page-size="pricesPage.size"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="pricingCfgTotal">
                </el-pagination>
              </div>
              <div class="pricing-show-title">定价变更记录</div>
              <el-table
                :data="changelogData"
                border
                style="width: 100%">
                <el-table-column
                  prop="changelog"
                  label="记录">
                </el-table-column>
                <el-table-column
                  prop="updateUserName"
                  label="更新人"
                  width="100">
                </el-table-column>
                <el-table-column
                  prop="updateTime"
                  label="更新时间"
                  width="150">
                </el-table-column>
              </el-table>
              <div class="pricing-pages">
                <el-pagination
                  background
                  @size-change="handleLogSizeChange"
                  @current-change="handleLogCurrentChange"
                  :page-sizes="[10, 20, 50, 100]"
                  :page-size="changelogPage.size"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="changelogPageTotal">
                </el-pagination>
              </div>
            </div>
          </div>
        </basic-container>
      </div>
    </div>
    <el-drawer
      title="分享账户"
      size="80%"
      :visible.sync="offerUserDetailDrawer"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :append-to-body="true"
      ref="drawer"
    >
      <div class="user-account-form" id="ContainersTableListTow-T">
        <el-table
          :data="userAccountList"
          border
          style="width: 100%"
          height="85vh">
          <el-table-column
            prop="accountName"
            label="账户名称">
          </el-table-column>
          <el-table-column
            prop="accountId"
            label="账户ID">
          </el-table-column>
          <el-table-column
            prop="permission"
            label="权限">
            <template v-slot="{row}">
              <cs-multiple-tags size="mini" type="info"
                                :tags-text="transformUserAccountPermission(row.permission)"></cs-multiple-tags>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-drawer>
    <el-drawer
      title="定价配置"
      size="80%"
      :visible.sync="pricingCfgDrawer"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :append-to-body="true"
      :wrapperClosable="false"
      @close="closePricingCfgDrawer"
    >
      <el-divider></el-divider>
      <cs-drawer-container>
        <div class="pricing-drawer">
          <div class="pricing-offer">
            <span>订单：</span><span v-if="selectionList.length>0">{{ selectionList[0].name }}</span>
          </div>
          <el-card>
            <el-form :inline="true" :model="pricingSearch" class="pricing-search" size="mini">
              <el-form-item label="媒体">
                <el-select size="mini" v-model="pricingSearch.platforms" placeholder="搜索媒体" filterable multiple
                           clearable @change="pricesPage.current = 1">
                  <el-option
                    v-for="item in platformList"
                    :key="item.dictKey"
                    :label="item.dictValue"
                    :value="item.dictKey">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="国家">
                <el-select size="mini" v-model="pricingSearch.countries" placeholder="搜索国家" filterable multiple
                           clearable @change="pricesPage.current = 1">
                  <el-option
                    v-for="item in nationList"
                    :key="item.geoKey"
                    :label="item.cnName"
                    :value="item.geoKey">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="系统">
                <el-select size="mini" v-model="pricingSearch.os" placeholder="搜索系统" filterable multiple clearable
                           @change="pricesPage.current = 1">
                  <el-option
                    v-for="item in osList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </el-card>
          <el-button type="primary" size="mini" icon="el-icon-plus" class="add-btn" @click="addPricingCfg">添加定价
          </el-button>
          <el-form ref="kpiForm" label-position="top" :model="pricingCfgForm" label-width="80px">
            <el-form-item>
              <el-table
                :data="pricingPageData"
                style="width: 100%"
              >
                <el-table-column
                  type="index"
                  label="#">
                </el-table-column>
                <el-table-column
                  prop="platform"
                  label="媒体">
                  <template v-slot="{row, column, $index}">
                    <el-select size="mini" v-model="row.platform" placeholder="请选择" filterable multiple clearable>
                      <el-option
                        v-for="item in pricingPlatforms"
                        :key="item.dictKey"
                        :label="item.dictValue"
                        :disabled="!row.platform.includes(item.dictKey) && disabledPlateform(item.dictKey,$index)"
                        :value="item.dictKey">
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="country"
                  label="国家">
                  <template v-slot="{row, column, $index}">
                    <el-select size="mini" v-model="row.country" placeholder="请选择" filterable multiple clearable>
                      <el-option
                        v-for="item in pricingNation"
                        :key="item.geoKey"
                        :label="item.cnName"
                        :disabled="!row.country.includes(item.geoKey) && disabledNation(item.geoKey,$index)"
                        :value="item.geoKey">
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="os"
                  label="操作系统">
                  <template v-slot="{row, column, $index}">
                    <el-select size="mini" v-model="row.os" placeholder="请选择" filterable multiple clearable>
                      <el-option
                        v-for="item in pricingOs"
                        :key="item.value"
                        :label="item.label"
                        :disabled="!row.os.includes(item.value) && disabledOs(item.value,$index)"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="priceType"
                  label="合作模式">
                  <template v-slot="{row, column, $index}">
                    <el-select size="mini" v-model="row.priceType" placeholder="请选择" filterable clearable>
                      <el-option
                        v-for="item in coopList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="price"
                  label="定价（费率）">
                  <template v-slot="{row, column, $index}">
                    <el-input size="mini" v-model="row.price" placeholder="请输入定价（费率）"></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="startDate"
                  label="生效日期">
                  <template v-slot="{row, column, $index}">
                    <el-date-picker
                      size="mini"
                      v-model="row.startDate"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="选择日期">
                    </el-date-picker>
                  </template>
                </el-table-column>
                <el-table-column
                  width="50">
                  <template v-slot="{row, column, $index}">
                    <el-button type="text" icon="el-icon-delete" style="cursor: pointer"
                               v-show="pricingCfgForm.configuration.length > 1"
                               @click="removePricingCfg($index)"></el-button>
                  </template>
                </el-table-column>
              </el-table>

              <!--<el-button size="mini" @click="somePricingCfg">同上</el-button>-->
            </el-form-item>
          </el-form>
          <div class="pricing-pages">
            <el-pagination
              background
              @size-change="handlePricingCfgSizeChange"
              @current-change="handlePricingCfgCurrentChange"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pricesPage.size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pricingCfgTotal">
            </el-pagination>
          </div>
        </div>
        <template v-slot:bottom>
          <el-button type="primary" size="mini" @click="savePricing">保存</el-button>
          <el-button size="mini" @click="pricingCfgDrawer = false">取消</el-button>
        </template>
      </cs-drawer-container>
    </el-drawer>
  </div>
</template>

<script>
import {
  getList,
  getDetail,
  add,
  update,
  remove,
  changeStatus,
  getPlatform,
  getGlobalConfiguration,
  getCommentPage,
  getPricePage,
  getPriceChangelogPage,
  createOfferComment,
  changePin,
  getAccountList,
  removeComment,
  updateComment,
  savePriceList
} from "@/api/business/offer";
import {getAllUser} from "@/api/user"
import {count} from "@/api/business/offerConflict";
import {mapGetters} from "vuex";
import offerEdit from "./components/offerEdit"
import offerConflictEdit from "./components/offerConflictEdit"
import {OC_LOGIN_URL} from "@/const/urlConst"
import {getToken} from '@/util/auth';
import {genTokenKey} from '@/api/user';
import website from "@/config/website";
import store from '@/store'
import TemplateConf from "@/views/system/components/templateConf";
import {checkOfferNotice, getConfSwitch} from "@/api/business/thirdpartyconf";
import {exportExcel2} from "@/util/util";
import Moment from 'moment';
import {transformObjectList, findObject} from "@/util/util";
import {getGeoList, getSysDictList} from "@/api/system/dict";
import beetlesTable from "@/components/basic-components/beetles-table"
import CsCell from "@/components/CsCell/CsCell";
import shareRe from "@/views/business/shareRe";
import {platformLogo} from "@/util/beetles";
import beetlesSearch from "@/components/basic-components/beetles-search"
import CsFilterQuery from "@/components/CsFilterQuery/CsFilterQuery";
import CsMultipleTags from "@/components/CsMultipleTags/CsMultipleTags";
import CsCommentList from "@/components/CsCommentList/CsCommentList";
import CsDrawerContainer from "@/components/CsDrawerContainer/CsDrawerContainer";
import {getOfferUserList, getShare2advAccountOuter, getUserAccountList} from "@/api/business/share";
import {debounce, cloneDeep} from 'lodash'
import {getCustomerManager, getOffer, getSalesManager} from "@/api/dataReport/cost-report-new";
import {getDeptList, getWorkrooms} from "@/api/accountOrTransfer/account";

export default {
  name: 'offer',
  components: {
    beetlesTable,
    TemplateConf,
    offerEdit,
    offerConflictEdit,
    CsCell,
    shareRe,
    beetlesSearch,
    CsFilterQuery,
    CsMultipleTags,
    CsCommentList,
    CsDrawerContainer
  },
  data() {
    let checkOfferId = (rule, value, callback) => {
      const shortReg = /^\d{3,20}$/;
      if (value !== '' && !shortReg.test(value)) {
        callback(new Error('请输入3-20位数字!'))
      } else {
        callback()
      }
    };
    return {
      editdialogVisible: false,
      editContent: '',
      editId: '',
      customerLevelList: [{value: "T1"}, {value: "T2"}, {value: "T3"}],
      globalConf: [],
      globalSwitch: '',
      offerNoticeConf: [],
      offerId: '',
      templateAdd: false,
      upIcon: 'el-icon-arrow-down',
      searchIcon: 'el-icon-search',
      emptyIcon: 'el-icon-delete',
      searchConceal: false,
      confirmToShare: 0,  //状态为0时分享界面显示确认分享按钮，为1时隐藏确认分享按钮
      confictedOfferNum: 0, //冲突订单的数量
      offerStatus: '',//offer状态
      editList: '',//编辑数据
      offerDialogType: '',//打开弹出框的类型
      offerDialogOpen: false,
      conflictDialogOpen: false,
      search: {},
      queryForm: {
        id: '',
        platforms: '',
        status: '',
        name: null,
        customerName: null,
        productName: null,
        salesManager: '',
        customerManager: '',
        createUser: '',
        sharedUserId: '',
        auditCreative: '',
        createDate: '',
        createDateRange: '',
        os: '',
        customerLevel: '',
        optimized: '',
        designer: '',
        isShared: ''
      },
      form: {},
      rules: {
        id: [{required: false, validator: checkOfferId, trigger: 'change'}],
      },
      query: {},
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      auditCreativeList: [
        {label: '不审核', value: 0},
        {label: '审核', value: 1},
      ],
      osList: [
        {label: 'IOS', value: 'ios'},
        {label: 'Android', value: 'android'},
        {label: 'Website', value: 'website'},
      ],
      statusList: [
        {label: '草稿', value: 0},
        {label: '活跃', value: 1},
        {label: '停止', value: 2},
        {label: '删除', value: 3},
      ],
      userList: [],
      confSwitch: '',
      checkOfferConf: '',
      selectionList: [],
      platformList: [],
      //是否为01用户，是否显示团队
      isTenantIds:false,
      option: {
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: true,
        viewBtn: false,
        editBtn: false,
        addBtn: false,
        //excelBtn: true,
        delBtn: false,
        selection: true,
        dialogClickModal: false,
        column: [
          {
            label: "订单名称",
            prop: "name",
            fixed: true,
            rules: [{
              required: true,
              message: "请输入订单名称",
              trigger: "blur"
            }],
          },
          {
            label: "订单ID",
            prop: "id",
            width: '150'
          },
          // {
          //   label: "等级",
          //   prop: "level"
          // },
          {
            label: "客户",
            prop: "customerName",
            showColumn: store.getters.userInfo.is_agency === 1,
            overHidden: true,
            searchSize: "mini",
          },
          {
            label: "团队",
            prop: "team",
            dicData: [],
            showColumn:true
          },
          {
            label: "客户等级",
            prop: "customerLevel",
            hide: store.getters.userInfo.is_agency === 0,
          },
          {
            label: "产品名",
            prop: "productName",
            rules: [{
              required: true,
              message: "请输入产品名",
              trigger: "blur"
            }],
            overHidden: true,
          },
          {
            label: "状态",
            prop: "status",
            dicData: [
              {label: '草稿', value: 0},
              {label: '活跃', value: 1},
              {label: '停止', value: 2},
              {label: '删除', value: 3}
            ],
            rules: [{
              required: false,
              message: "请输入状态",
              trigger: "blur"
            }],
            slot: true,
          },
          {
            label: "客户经理",
            prop: "customerManager",
            type: 'select',
            dicUrl: '/api/blade-user/select-user?roleAlias=customer_manager',
            props: {
              label: "realName",
              value: "id"
            },
            dataType: 'string',
            rules: [{
              required: true,
              message: "请选择客户经理",
              trigger: "blur"
            }],
            addDisplay: true,
            viewDisplay: true,
            editDisplay: true,
            hide: store.getters.userInfo.is_agency === 0,
          },
          {
            label: "优化师",
            prop: "opUsers",
            hide: store.getters.userInfo.is_agency === 0,
          },
          {
            label: "设计师",
            prop: "designers",
            hide: store.getters.userInfo.is_agency === 0,
          },
          {
            label: "账户",
            prop: "accounts",
          },
          {
            label: "内外订单",
            prop: "isShared",
            type: 'select',
            dicData: [
              {label: '内部', value: 0},
              {label: '外部', value: 1},
            ],
            hide: false,
          },
          {
            label: "素材审核",
            prop: "auditCreative",
            type: 'select',
            dicData: [
              {label: '审核', value: 1},
              {label: '不审核', value: 0}
            ],
            rules: [{
              required: true,
              message: "请输入是否审核素材",
              trigger: "blur"
            }]
          },
          {
            label: "媒体",
            prop: "platforms",
            type: 'select',
            multiple: true,
            slot: true,
            dataType: 'string',
            dicData: [],
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            searchMultiple: true,
          },
          {
            label: "操作系统",
            prop: "os",
            type: 'select',
            multiple: true,
            dicData: [],
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            slot: true,
            dataType: 'string',
            rules: [{
              required: true,
              message: "请输入操作系统",
              trigger: "blur"
            }]
          },
          {
            label: "备注",
            prop: "remark",
            // overHidden: true
          },
          {
            label: "销售经理",
            prop: "salesManager",
            type: 'select',
            dicUrl: '/api/blade-user/select-user?roleAlias=sales_manager',
            props: {
              label: "realName",
              value: "id"
            },
            dataType: 'string',
            rules: [{
              required: true,
              message: "请选择销售经理",
              trigger: "blur"
            }],
            addDisplay: true,
            viewDisplay: true,
            editDisplay: true,
            hide: store.getters.userInfo.is_agency === 0,
          },
          {
            label: "创建人",
            prop: "createUser",
            dicUrl: "/api/blade-user/get-user-select",
            props: {
              label: "realName",
              value: "id"
            },
            overHidden: true,
            addDisplay: false
          },
          {
            label: "创建时间",
            prop: "createTime",
            overHidden: true,
          },
        ],
        menuWidth: 180,
      },
      data: [],
      currOpRowId: '',
      // 分享弹窗
      // -----------------marco------------------------
      shareDialog: false,
      isComment: false,
      commentMenu: '1',
      currentRow: {},
      // 国家列表
      nationList: [],
      // 平台列表
      platformsList: [],
      // 评论页
      commentsPage: {
        current: 1,
        size: 500
      },
      //评论数据
      commentsData: [],
      // 定价
      pricesPage: {
        current: 1,
        size: 10
      },
      // 只看DIN
      lookPin: false,
      //评论表单
      commentForm: {
        level: 'COMMENT',
        content: ''
      },
      // 回复的详情
      replyContent: null,
      // 评论总数
      commentsTotal: 0,
      commentsTotalForMenu: 0,
      // 用户列表
      offerUserList: [],
      // 用户列表页
      offerUserPage: {
        current: 1,
        size: 10
      },
      // 分享用户总数
      offerUserTotal: 0,
      // 分享用户抽屉
      offerUserDetailDrawer: false,
      // 用户下账户分页
      userAccountPage: {
        current: 1,
        size: 10
      },
      // 用户下账户总数
      userAccountTotal: 0,
      // 用户下账户列表
      userAccountList: [],
      // 订单下所有账户列表
      offerAccountList: [],
      offerAccountPage: {
        current: 1,
        size: 10
      },
      offerAccountTotal: 0,
      offerAccountTotalForMenu: 0,
      // 账户查询对象
      queryOfferAccountForm: {},
      // 外部用户列表
      offerAccountOuterList: [],
      offerAccountOuterPage: {
        current: 1,
        size: 10
      },
      // 分享菜单功能表单
      shareMenuForm: {
        checkedMenu: []
      },
      // 分享菜单列表
      shareMenuList: [{id: '1', value: '商务中心-花费报告'}, {id: '2', value: '订单中心-效果报告'}, {id: '3', value: '订单中心-数据报告'}],
      // 评论发布校验
      commentRules: {
        content: [
          {required: true, message: '请输入评论内容', trigger: 'blur'},
        ]
      },
      // 客户经理列表
      customerManagerList: [],
      // 销售经理列表
      salesManagerList: [],
      // 订单列表
      offerList: [],
      // 控制评论输入框展示
      isShowCommentInput: false,
      submitLoading: false,
      priceLoading: false,
      // 评论加载
      commentLoading: false,
      // 评论搜索
      commentSearchForm: {
        createUsers: null,
        commentSearchDate: null,
      },
      commentPickerOptions: {},
      pricingCfgDrawer: false,
      pricingCfgForm: {
        configuration: []
      },
      coopList: [{
        label: 'CPI',
        value: 'cpi'
      }, {
        label: 'CPC',
        value: 'cpc'
      }],
      // 回显数据(临时)
      // pricingCfgData: [{"platform":["facebook"],"country":["AD"],"os":["ios"],"priceType":"cpc","price":"454","startDate":"2023-01-11"},{"platform":["google","facebook"],"country":["AD","AF"],"os":["website","android"],"priceType":"cpm","price":"45","startDate":"2023-01-16"},{"platform":["facebook"],"country":["AG"],"os":["ios","android","website"],"priceType":"","price":"66","startDate":"2023-01-05"}],
      changelogData: [],
      pricingSearch: {
        platforms: [],
        countries: [],
        os: []
      },
      changelogPage: {
        current: 1,
        size: 10
      },
      changelogPageTotal: 0,
      deptList: []
    }
  },
  filters: {
    filterStatus(originVal) {
      let status = ''
      switch (originVal) {
        case 0:
          status = '草稿'
          break
        case 1:
          status = '活跃'
          break
        case 2:
          status = '停止'
          break
        case 3:
          status = '删除'
          break
        default:
          status = '未定义'
      }
      return status
    },
    filterIsShared(originVal) {
      let shared = ''
      switch (originVal) {
        case 0:
          shared = '内部'
          break
        case 1:
          shared = '外部'
          break
        default:
          shared = '未定义'
      }
      return shared
    },
    filterAuditCreative(originVal) {
      let val = ''
      switch (originVal) {
        case 0:
          val = '不审核'
          break
        case 1:
          val = '审核'
          break
        default:
          val = '未定义'
      }
      return val
    }
  },
  activated() {
    // ::TODO BUG:组件切换路由不销毁,导致beetles-table组件固定表头会出现阻挡
    // this.$refs.crud.handleScroll()

    this.$route.meta.isBack = false
  },
  computed: {
    ...mapGetters(["permission", "userInfo", "roles"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.offer_add, false),
        viewBtn: this.vaildData(this.permission.offer_view, false),
        delBtn: this.vaildData(this.permission.offer_delete, false),
        editBtn: this.vaildData(this.permission.offer_edit, false),
        excelBtn: this.vaildData(this.roles.admin || this.roles.operator, false),
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
    deletableSelectedList() {
      return this.getDeletableSelectedList();
    },
    // 筛选组件配置
    filterQueryOptions() {
      const opt = [{
        value: 'id',
        label: '订单ID',
      }, {
        value: 'offerId',
        label: '订单名称',
        queryList: this.offerList
      }, {
        value: 'customerName',
        label: '客户',
      }, {
        value: 'productName',
        label: '产品名',
      }, {
        value: 'statusList',
        label: '状态',
        children: [
          {label: '草稿', value: 0},
          {label: '活跃', value: 1},
          {label: '停止', value: 2},
          {label: '删除', value: 3}
        ]
      }, {
        value: 'customerManager',
        label: '客户经理',
        queryList: this.customerManagerList
      }, {
        value: 'team',
        label: '团队',
        children: this.deptList
      }, {
        value: 'isShared',
        label: '内外订单',
        children: [
          {label: '内部', value: 0},
          {label: '外部', value: 1}
        ]
      }, {
        value: 'auditCreative',
        label: '素材审核',
        children: [
          {label: '不审核', value: 0},
          {label: '审核', value: 1}
        ]
      }, {
        value: 'platforms',
        label: '媒体',
        children: this.platformList.map(item => {
          return {
            label: item.dictValue,
            value: item.dictKey
          }
        })
      }, {
        value: 'os',
        label: '操作系统',
        children: [
          {label: 'IOS', value: 'ios'},
          {label: 'Android', value: 'android'},
          {label: 'Website', value: 'website'},
        ]
      }, {
        value: 'salesManager',
        label: '销售经理',
        queryList: this.salesManagerList
      }, {
        value: 'createUser',
        label: '创建人',
        queryList: this.userList.map(item => {
          return {
            label: item.realName,
            value: item.id
          }
        })
      }, {
        value: 'sharedUserId',
        label: '用户',
        queryList: this.userList.map(item => {
          return {
            label: item.realName,
            value: item.id
          }
        })
      }]
      // 权限给与的选项
      const role = [{
        value: 'customerLevel',
        label: '客户等级',
        children: [
          {label: "T1", value: "T1"},
          {label: "T2", value: "T2"},
          {label: "T3", value: "T3"}]
      }, {
        value: 'optimized',
        label: '优化师',
        queryList: this.userList.map(item => {
          return {
            label: item.realName,
            value: item.id
          }
        })
      }, {
        value: 'designer',
        label: '设计师',
        queryList: this.userList.map(item => {
          return {
            label: item.realName,
            value: item.id
          }
        })
      },]
      if (this.$store.getters.userInfo.is_agency !== 0) {
        return opt.concat(role)
      } else {
        return opt
      }
    },
    formatterCommentSearchForm() {
      return {
        createUser: this.commentSearchForm.createUsers,
        startCreateTime: this.commentSearchForm.commentSearchDate ? this.commentSearchForm.commentSearchDate[0] + " 00:00:00" : null,
        endCreateTime: this.commentSearchForm.commentSearchDate ? this.commentSearchForm.commentSearchDate[1] + " 23:59:59" : null
      }
    },
    pricingNation() {
      const nations = this.pricingCfgForm.configuration.reduce((prev, cur, index, arr) => {
        return prev.concat(cur.country)
      }, [])
      const platforms = this.pricingCfgForm.configuration.reduce((prev, cur, index, arr) => {
        return prev.concat(cur.platform)
      }, [])
      const os = this.pricingCfgForm.configuration.reduce((prev, cur, index, arr) => {
        return prev.concat(cur.os)
      }, [])
      return this.nationList.map(item => {
        item.platforms = platforms
        item.os = os
        item.nations = nations
        // item.disabled = nations.includes(item.geoKey)
        return item
      })
    },
    pricingPlatforms() {
      const nations = this.pricingCfgForm.configuration.reduce((prev, cur, index, arr) => {
        return prev.concat(cur.country)
      }, [])
      const platforms = this.pricingCfgForm.configuration.reduce((prev, cur, index, arr) => {
        return prev.concat(cur.platform)
      }, [])
      const os = this.pricingCfgForm.configuration.reduce((prev, cur, index, arr) => {
        return prev.concat(cur.os)
      }, [])
      return this.platformList.map(item => {
        item.platforms = platforms
        item.os = os
        item.nations = nations
        // item.disabled = nations.includes(item.geoKey)
        return item
      })
    },
    pricingOs() {
      const nations = this.pricingCfgForm.configuration.reduce((prev, cur, index, arr) => {
        return prev.concat(cur.country)
      }, [])
      const platforms = this.pricingCfgForm.configuration.reduce((prev, cur, index, arr) => {
        return prev.concat(cur.platform)
      }, [])
      const os = this.pricingCfgForm.configuration.reduce((prev, cur, index, arr) => {
        return prev.concat(cur.os)
      }, [])
      return this.osList.map(item => {
        item.platforms = platforms
        item.os = os
        item.nations = nations
        // item.disabled = nations.includes(item.geoKey)
        return item
      })
    },
    pricingPageData: {
      get() {
        return this.pricingCfgForm.configuration.filter(item => {
          if (item.platform.length === 0) return true
          if (item.country.length === 0) return true
          if (item.os.length === 0) return true
          return item.platform.some(p => {
            if (this.pricingSearch.platforms.length > 0) {
              return this.pricingSearch.platforms.includes(p)
            } else {
              return true
            }
          }) && item.country.some(c => {
            if (this.pricingSearch.countries.length > 0) {
              return this.pricingSearch.countries.includes(c)
            } else {
              return true
            }
          }) && item.os.some(o => {
            if (this.pricingSearch.os.length > 0) {
              return this.pricingSearch.os.includes(o)
            } else {
              return true
            }
          })
        }).slice((this.pricesPage.current - 1) * this.pricesPage.size, this.pricesPage.current * this.pricesPage.size)
      },
      set(val) {
        console.log(val)
      },

    },
    pricingCfgTotal: {
      get() {
        return this.pricingCfgForm.configuration.filter(item => {
          if (item.platform.length === 0) return true
          if (item.country.length === 0) return true
          if (item.os.length === 0) return true
          return item.platform.some(p => {
            if (this.pricingSearch.platforms.length > 0) {
              return this.pricingSearch.platforms.includes(p)
            } else {
              return true
            }
          }) && item.country.some(c => {
            if (this.pricingSearch.countries.length > 0) {
              return this.pricingSearch.countries.includes(c)
            } else {
              return true
            }
          }) && item.os.some(o => {
            if (this.pricingSearch.os.length > 0) {
              return this.pricingSearch.os.includes(o)
            } else {
              return true
            }
          })
        }).length
      },
      set(val) {
        console.log(val)
      }
    }
  },
  created() {
    console.log(this.roles)
    //判断是否为03用户，是否显示团队
    if(this.userInfo.tenant_id != '321600'){
      this.option.column.find(item => item.label == '团队').showColumn=false
      this.isTenantIds=false
    }else{
      this.isTenantIds=true
    }
    this.getCustomerManagerList()
    this.getSalesManagerList()
    this.getOfferList()
    getGlobalConfiguration().then(res => {
      if (res.data.data.length > 0) {
        this.globalConf = res.data.data[0].offerNoticeRoles.split(',')
        this.globalSwitch = res.data.data[0].offerNotice
      }
    })
    getSysDictList('platforms,app_os').then(map => {
      this.platformList = map['platforms'];
      let column = findObject(this.option.column, 'platforms', 'prop')
      if (column != null) {
        column.dicData = map['platforms'];
      }
      column = findObject(this.option.column, 'os', 'prop')
      if (column != null) {
        column.dicData = map['app_os'];
      }
    });
    getAllUser({statusList: '0,1,2'}).then(res => {
      this.userList = res.data.data
    });
    getConfSwitch().then(res => {
      this.confSwitch = res.data.data
    })
    checkOfferNotice().then(res => {
      this.offerNoticeConf = res.data.data
    })
    this.buildSearch();
    getGeoList().then(res => {
      this.nationList = res.data.data
    })
    getSysDictList('platforms').then(map => {
      this.platformsList = map['platforms']
    })
    this.getDeptList()
  },
  mounted() {
    this.countConflictedOffer();//需要触发的函数
    this.$bus.on("parameterName", value => {
      this.confSwitch = value
    });
  },
  watch: {
    commentMenu: {
      handler: 'handlleClickMenu'
    }
  },
  methods: {
    //跳转订单模板
    openTagsModel() {
      if (this.selectionList.length === 0 || this.selectionList.length > 1) {
        this.$message.warning("请选择一张订单添加标签模板");
        return;
      }
      // this.$router.push({name: '全局配置', params: {config: 'tags', offerId: this.selectionList[0].id}})
      this.$router.push({
        name: '全局配置',
        params: {config: 'newtag', offerId: this.selectionList[0].id, active: 'template'}
      })
    },
    noticeConf(row) {
      this.offerId = row.id
      getGlobalConfiguration().then(res => {
        this.globalConf = res.data.data[0].offerNoticeRoles.split(',')
        this.globalSwitch = res.data.data[0].offerNotice
      })
      this.templateAdd = true
    },
    closeAddDialog() {
      this.templateAdd = false
    },
    allNotice() {
      checkOfferNotice().then(res => {
        this.offerNoticeConf = res.data.data
      })
    },
    getUserNames(userIds) {
      if (userIds != null && userIds != '' && this.userList != null && this.userList.length > 0) {
        let list = [];
        let ids = ('' + userIds).split(',');
        this.userList.forEach(user => {
          if (ids.includes(user.id)) {
            list.push(user.realName);
          }
        })
        return list.join(',');
      }
      return userIds;
    },
    unfoldIcon() {
      if (this.upIcon === 'el-icon-arrow-down') {
        this.upIcon = 'el-icon-arrow-up'
        this.searchConceal = true
      } else {
        this.upIcon = 'el-icon-arrow-down'
        this.searchConceal = false
      }
    },
    isShowSelectOptions(isShowSelectOptions) {
      if (!isShowSelectOptions) this.$refs.offerPlatform.blur();
      if (!isShowSelectOptions) this.$refs.offerStatus.blur();
    },
    buildSearch() {
      let query = {...this.queryForm};
      // 改为多选
      // query.customerLevel = query.customerLevel.join(',')
      // query.status = query.status.join(',')
      // query.customerManager = query.customerManager.join(',')
      // query.optimized = query.optimized.join(',')
      // query.designer = query.designer.join(',')
      // query.isShared = query.isShared.join(',')
      // query.auditCreative = query.auditCreative.join(',')
      // query.platforms = query.platforms.join(',')
      // query.os = query.os.join(',')
      // query.salesManager = query.salesManager.join(',')
      // query.createUser = query.createUser.join(',')
      // query.sharedUserId = query.sharedUserId.join(',')
      delete query.createDateRange;
      if (this.queryForm.createDateRange != null && this.queryForm.createDateRange.length == 2) {
        query.createDate = Moment(this.queryForm.createDateRange[0]).format('YYYY-MM-DD') + ',' + Moment(this.queryForm.createDateRange[1]).format('YYYY-MM-DD');
      }
      this.query = query;
    },
    //搜索按钮函数
    searchForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.buildSearch();
          this.page.currentPage = 1
          this.onLoad(this.page)
        }
      });
    },
    //清楚按钮函数
    emptyForm() {
      this.queryForm = {
        id: '',
        platforms: null,
        status: null,
        name: null,
        customerName: null,
        productName: null,
        salesManager: null,
        customerManager: null,
        createUser: null,
        sharedUserId: null,
        auditCreative: '',
        createDate: '',
        createDateRange: [],
        os: '',
        designer: '',
        optimized: '',
        customerLevel: ''
      }
      this.searchForm();
    },

    getTokenKeyInfo(row, type) {
      if (type == 'offer') {
        return JSON.stringify({offerId: row.id});
      }
      return '';
    },
    openOcPage(row, type) {
      let ocTokenKey = '';
      let headers = {};
      headers[website.tokenHeader] = getToken();
      genTokenKey({
        sync: true,
        headers: headers,
        info: this.getTokenKeyInfo(row, type),
        success: (data) => {
          ocTokenKey = data.tokenKey;
        },
        error: () => {
        }
      });
      if (ocTokenKey == '') {
        this.$message.error('获取信息错误，无法正确跳转到订单中心');
        return;
      }
      let eleList = document.querySelectorAll('div[newPageLink]');
      let content = eleList[0];
      let linkEle = document.createElement("a");
      content.appendChild(linkEle);

      // 利用URL.createObjectURL()方法为a元素生成blob URL
      linkEle.target = '_blank';
      linkEle.href = OC_LOGIN_URL + '?tokenKey=' + ocTokenKey;
      linkEle.click();
      linkEle.remove();
    },
    // 统计冲突数量
    countConflictedOffer() {
      count().then(res => {
        this.confictedOfferNum = res.data.data;
      });
    },

    //打开 安卓,ios链接
    openUrl(url) {
      if (url.startsWith('http://') || url.startsWith('https://')) {
        window.open(url, '_blank')
      } else {
        window.open('https://' + url, '_blank')
      }
    },

    //修改状态
    async changeStatus(val, row) {
      // if (!this.offerNoticeConf.includes(row.id) && (this.confSwitch === "100" || this.confSwitch === 100)) {
      //   this.offerId = row.id
      //   this.templateAdd = true
      //   this.$message({
      //     type: 'warning',
      //     message: "请配置为此订单添加通知配置"
      //   })
      //   getGlobalConfiguration().then(res => {
      //     this.globalConf = res.data.data[0].offerNoticeRoles.split(',')
      //     this.globalSwitch = res.data.data[0].offerNotice
      //   })
      //   this.refreshChange()
      //   return
      // }
      let stop = false
      if (val === 2) {
        await this.$confirm('此操作将停止订单, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(() => {
          stop = true
        })
      }
      if (stop) return this.refreshChange()
      const res = await changeStatus(row.id, val)
      if (res.data.code === 200) {
        this.$message({
          type: 'success',
          message: '状态修改成功!'
        })
      }
      this.refreshChange()
    },
    //table 状态
    statusTableList() {
      return [
        {label: '草稿', value: 0, disabled: true},
        {label: '活跃', value: 1},
        {label: '停止', value: 2}
      ]
    },
    //分享mangai
    handleShare() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      // if (this.selectionList.length !== 1) {
      //   this.$message.warning("只能选择一条数据")
      //   return
      // }
      if (this.selectionList[0].status != 1) {
        this.$message.warning("当前订单不是活跃状态，不能被分享")
        return;
      }
      this.confirmToShare = 0
      // this.$router.push({path: '/business/share', query: {offerId: this.selectionList[0].id}})
      // 新抽屉样式
      this.shareDialog = true
    },

    //查看
    checkRow(row) {
      this.currOpRowId = row.id;
      getDetail(row.id).then(res => {
        this.editList = res.data.data;
      });
      this.offerDialogType = 'check'
      this.offerDialogOpen = true
      this.confirmToShare = 1
    },
    //编辑
    editRow(row) {
      this.currOpRowId = row.id;
      getDetail(row.id).then(res => {
        this.editList = res.data.data;
        this.offerStatus = res.data.data.status
      });
      this.offerDialogType = 'edit'
      this.offerDialogOpen = true
    },
    //复制
    copyRow(row) {
      this.currOpRowId = row.id;
      getDetail(row.id).then(res => {
        this.editList = res.data.data;
        this.offerStatus = res.data.data.status
      });
      this.offerDialogType = 'copy'
      this.offerDialogOpen = true
      this.$alert('订单所关联App的更改，将影响Beetles数据的持续录入，我们建议您新建一个订单来关联此新的App。若一定要进行修改，请联系Beetles客户服务人员”', {
        confirmButtonText: '确定',
        iconClass: 'el-icon-warning'
      });
    },
    //新增
    handleAdd() {
      this.offerDialogType = 'add'
      this.offerStatus = ''
      this.offerDialogOpen = true
    },
    //dialog关闭回调
    closeOfferDialog() {
      this.offerDialogOpen = false
      this.offerStatus = 'close'
      this.onLoad(this.page);
    },

    // offer冲突处理弹窗打开
    handleFixConflict() {
      this.conflictDialogOpen = true;
    },
    //offer冲突处理关闭回调
    conflictCloseDialog() {
      this.conflictDialogOpen = false
      this.onLoad(this.page);
    },

    //媒体 logo
    platformLogo(androidPlatform, iosPlatform, websitePlatform) {
      if (androidPlatform === undefined) return []
      let androidList = androidPlatform.split(',')
      let iosList = iosPlatform.split(',')
      let websiteList = websitePlatform.split(',')
      let platform = Array.from(new Set([...androidList, ...iosList, ...websiteList]))
      return platformLogo(platform.join(","))
    },
    rowDel(row) {
      // if (row.originOfferId === -1 && row.status !== 0) {
      //   if (!this.offerNoticeConf.includes(row.id) && (this.confSwitch === 100 || this.confSwitch === "100")) {
      //     this.templateAdd = true
      //     this.$message({
      //       type: 'warning',
      //       message: "请先为此订单配置通知配置后方可删除"
      //     })
      //     getGlobalConfiguration().then(res => {
      //       this.globalConf = res.data.data[0].offerNoticeRoles.split(',')
      //       this.globalSwitch = res.data.data[0].offerNotice
      //     })
      //     return
      //   }
      // }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        });
    },

    getDeletableSelectedList() {
      if (this.selectionList == null) {
        return [];
      }
      for (let i = 0; i < this.selectionList.length; i++) {
        if (this.selectionList[i].status == 1 || this.selectionList[i].status == 3) {
          return [];
        }
        // if (!this.offerNoticeConf.includes(this.selectionList[i].id) && (this.confSwitch ===100 || this.confSwitch === "100")){
        //   return [];
        // }
      }
      return this.selectionList;
    },
    handleDelete() {
      for (let i = 0; i < this.selectionList.length; i++) {
        if (this.selectionList[i].status == 1 || this.selectionList[i].status == 3) {
          this.$message({
            type: 'warning',
            message: "活跃或已被删除的订单，不允许删除"
          })
          return;
        }
      }
      for (let i = 0; i < this.selectionList.length; i++) {
        if (!this.offerNoticeConf.includes(this.selectionList[i].id) && (this.confSwitch === 100 || this.confSwitch === "100")) {
          this.$message({
            type: 'warning',
            message: "存在未配置通知配置的订单，不允许删除"
          })
          return;
        }

      }
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return remove(this.ids);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.$refs.crud.toggleSelection();
        });
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page);
    },
    async onLoad(page, params = {}) {
      this.loading = true;
      params.offerType = "admin,owner,manager,shared"
      if (this.userList == null || this.userList.length == 0) {
        await getAllUser({statusList: '0,1,2'}).then(res => {
          this.userList = res.data.data
        });
      }
      await getList({
        ...params,
        current: this.page.currentPage,
        size: this.page.pageSize
      }, {
        ...this.query
      }).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        this.selectionClear();
      });
      this.countConflictedOffer();
    },
    getRowClassName({row}) {
      if (row.id == this.currOpRowId) {
        return "current-op-row";
      } else {
        return "";
      }
    },
    handleExport() {
      this.$confirm("是否导出订单数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let tableData = {
          title: null,
          headers: [],
          rowList: [],
          bottom: [],
        };
        tableData.headers.push({
          data: '订单ID',
          style: 'text-align: right; background-color: #bebebe; font-weight: bold;'
        });
        tableData.headers.push({
          data: '订单名称',
          style: 'text-align: right; background-color: #bebebe; font-weight: bold;'
        });
        tableData.headers.push({data: '客户', style: 'text-align: right; background-color: #bebebe; font-weight: bold;'});
        tableData.headers.push({
          data: '客户等级',
          style: 'text-align: right; background-color: #bebebe; font-weight: bold;'
        });
        tableData.headers.push({
          data: '产品名',
          style: 'text-align: right; background-color: #bebebe; font-weight: bold;'
        });
        tableData.headers.push({data: '状态', style: 'text-align: right; background-color: #bebebe; font-weight: bold;'});
        tableData.headers.push({
          data: '客户经理',
          style: 'text-align: right; background-color: #bebebe; font-weight: bold;'
        });
        tableData.headers.push({
          data: '优化师',
          style: 'text-align: right; background-color: #bebebe; font-weight: bold;'
        });
        tableData.headers.push({
          data: '设计师',
          style: 'text-align: right; background-color: #bebebe; font-weight: bold;'
        });
        tableData.headers.push({data: '账户', style: 'text-align: right; background-color: #bebebe; font-weight: bold;'});
        tableData.headers.push({
          data: '内外订单',
          style: 'text-align: right; background-color: #bebebe; font-weight: bold;'
        });
        tableData.headers.push({
          data: '素材审核',
          style: 'text-align: right; background-color: #bebebe; font-weight: bold;'
        });
        tableData.headers.push({data: '媒体', style: 'text-align: right; background-color: #bebebe; font-weight: bold;'});
        tableData.headers.push({
          data: '操作系统',
          style: 'text-align: right; background-color: #bebebe; font-weight: bold;'
        });
        tableData.headers.push({data: '备注', style: 'text-align: right; background-color: #bebebe; font-weight: bold;'});
        tableData.headers.push({
          data: '销售经理',
          style: 'text-align: right; background-color: #bebebe; font-weight: bold;'
        });
        tableData.headers.push({
          data: '创建人',
          style: 'text-align: right; background-color: #bebebe; font-weight: bold;'
        });
        tableData.headers.push({
          data: '创建时间',
          style: 'text-align: right; background-color: #bebebe; font-weight: bold;'
        });
        console.log(this.selectionList)
        this.selectionList.forEach(row => {
          console.log(row)
          let colList = [];
          let os = []
          if (row.androidAppUrl !== '') os.push("Android")
          if (row.iosAppUrl !== '') os.push("IOS")
          if (row.websiteAppUrl !== '') os.push("Website")

          let androidList = row.androidPlatform.split(',')
          let iosList = row.iosPlatform.split(',')
          let websiteList = row.websitePlatform.split(',')
          let platforms = Array.from(new Set([...androidList, ...iosList, ...websiteList]))
          let auditCreative = ''
          if (row.auditCreative === 1) {
            auditCreative = "审核"
          }
          if (row.auditCreative === 0) {
            auditCreative = "不审核"
          }
          colList.push({data: row.id, style: 'text-align: right; vnd.ms-excel.numberformat: @'});
          colList.push({data: row.name, style: 'text-align: right;'});
          colList.push({data: row.customerName, style: 'text-align: right;'});
          colList.push({data: row.customerLevel, style: 'text-align: right;'});
          colList.push({data: row.productName, style: 'text-align: right;'});
          colList.push({data: row.$status, style: 'text-align: right;'});
          colList.push({data: row.$customerManager, style: 'text-align: right;'});
          colList.push({data: this.findOpUsers(row.opUsers), style: 'text-align: right;'});
          colList.push({data: this.findDesigners(row.designers), style: 'text-align: right;'});
          colList.push({data: row.accounts, style: 'text-align: right;'});
          colList.push({data: row.$isShared, style: 'text-align: right;'});
          colList.push({data: auditCreative, style: 'text-align: right;'});
          colList.push({data: platforms.filter(p => p).join(","), style: 'text-align: right;'});
          colList.push({data: os.join(","), style: 'text-align: right;'});
          colList.push({data: row.remark, style: 'text-align: right;'});
          colList.push({data: row.$salesManager, style: 'text-align: right;'});
          colList.push({data: row.$createUser, style: 'text-align: right;'});
          colList.push({data: row.createTime, style: 'text-align: right;'});
          tableData.rowList.push(colList);
        });
        exportExcel2(tableData.title, tableData.headers, tableData.rowList, tableData.bottom, '订单数据表');
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    saveShare() {
      this.$refs.shareRef.$refs.shareAdvRef.confirmShare2adv()
      this.shareDialog = false
    },
    // marco methods
    // 查找优化师
    findOpUsers(val) {
      if (val === '' || val === undefined) return ''
      const users = val.split(',')
      // 过滤，遍历，拼装成字符串
      return this.userList.filter(user => users.includes(user.id)).map(item => item.realName).join(',')
    },
    // 查找设计师
    findDesigners(val) {
      if (val === '' || val === undefined) return ''
      const users = val.split(',')
      // 过滤，遍历，拼装成字符串
      return this.userList.filter(user => users.includes(user.id)).map(item => item.realName).join(',')
    },
    // 筛选框查询
    handleChangeFilter(val) {
      this.query = val
      this.page.currentPage = 1
      this.onLoad(this.page)
    },
    backToMain() {
      this.isComment = false
      this.commentsData = []
      this.commentMenu = '1'
      this.commentsPage.current = 1
      this.offerUserPage.current = 1
      this.userAccountPage.current = 1
      this.offerAccountPage.current = 1
      this.offerAccountOuterPage.current = 1
      this.queryOfferAccountForm = {}
      this.commentForm.content = ''
      this.commentSearchForm.commentSearchDate = null
      this.commentSearchForm.createUsers = null
      this.lookPin = false
    },
    showComment(row, menu) {
      console.log('row', row)
      // const {data: res} = await getDetail(row.id)
      this.currentRow = row

      this.getCommentPage()
      this.getOfferUserList()
      this.getOfferAccountList()
      this.getOfferAccountOuterList()
      this.getOfferPricePage(row.id)
      this.getOfferPriceChangelogPage(row.id)
      this.currentRow._customerManager = this.getUserNames(this.currentRow.customerManager)
      this.currentRow._salesManager = this.getUserNames(this.currentRow.salesManager)
      this.currentRow._createUser = this.getUserNames(this.currentRow.createUser)
      this.currentRow._opUsers = this.findOpUsers(this.currentRow.opUsers)
      this.currentRow._designers = this.findDesigners(this.currentRow.designers)
      this.isComment = true
      this.commentMenu = menu
    },
    // 过滤国家
    filterNation(originVal) {
      if (originVal === '') {
        return ''
      } else {
        const arr = originVal.split(',')
        const Nations = arr.map(item => {
          return this.nationList.find(country => country.geoKey === item).cnName
        })
        return Nations.join(',')
      }

    },
    // 过滤平台
    filterPlatfrom(originVal) {
      const arr = originVal.split(',')
      const platfroms = arr.map(item => {
        return this.platformsList.find(platfrom => platfrom.dictKey === item).dictValue
      })
      return platfroms.join(',')
    },
    async getOfferPriceChangelogPage(id) {
      const {data: res} = await getPriceChangelogPage({
        offerId: id || this.selectionList[0].id,
        current: this.changelogPage.current,
        size: this.changelogPage.size
      }).finally(() => {
      })
      this.changelogData = res.data.records
      this.changelogPageTotal = res.data.total
    },
    async getOfferPricePage(id) {
      this.priceLoading = true
      const {data: res} = await getPricePage({
        offerId: id || this.selectionList[0].id,
        current: 1,
        size: 500
      }).finally(() => {
        this.priceLoading = false
      })
      // this.pricingCfgTotal = res.data.total
      this.pricingCfgForm.configuration = res.data.records
      if (this.pricingCfgForm.configuration.length == 0) {
        this.pricingCfgForm.configuration.push({
          platform: [],
          country: [],
          os: [],
          priceType: '',
          price: '',
          startDate: ''
        })
      } else {
        this.pricingCfgForm.configuration.forEach(item => {
          item.country = item.country.split(",")
          item.platform = item.platform.split(",")
          item.os = item.os.split(",")
        })

      }
    },
    // 获取评论
    async getCommentPage() {
      this.commentLoading = true
      const {data: res} = await getCommentPage({
        offerId: this.currentRow.id,
        ...this.commentsPage,
        isPin: this.lookPin,
        ...this.formatterCommentSearchForm
      }).finally(() => {
        this.commentLoading = false
      })
      const {data: {data: {total}}} = await getCommentPage({
        offerId: this.currentRow.id,
        ...this.commentsPage,
      })
      this.commentsTotalForMenu = total
      this.commentsTotal = res.data.total
      this.commentsData = res.data.records
    },
    resetComment() {
      this.commentSearchForm = {
        createUsers: null,
        commentSearchDate: null,
      }
      this.getCommentPage()
    },
    // 发布评论
    submitComment() {
      this.$refs.commentFormRef.validate(async vail => {
          if (!vail) return
          const content = this.commentForm.content.trimStart()
          if (content === '') return this.commentForm.content = ''
          this.submitLoading = true
          const {data: res} = await createOfferComment({
            ...this.commentForm,
            offerId: this.currentRow.id,
          }).finally(() => {
            this.submitLoading = false
          })
          this.commentsPage.current = 1
          await this.getCommentPage()
          this.commentForm.content = ''
          this.commentForm.id = null
          this.commentForm.level = 'COMMENT'
          this.replyContent = null
        }
      )

      // console.log(res)
    },
    // 改变pin
    async changePin(id, isPin) {
      console.log(id)
      await changePin({
        id,
        isPin: !isPin
      })
      this.commentsPage.current = 1
      await this.getCommentPage()
    },
    // 选择回复
    chooseReply(comment) {
      // if (this.commentForm.level !== 'REPLY'){
      //   this.commentForm.content = ''
      // }
      // console.log(comment)
      // this.commentForm.content = ''
      // if (comment) {
      //   this.commentForm.id = comment.id
      //   this.commentForm.level = 'REPLY'
      //   this.isShowCommentInput = true
      //   this.replyContent = comment

      // }
      // else {
      //   this.commentForm.id = null
      //   this.commentForm.level = 'COMMENT'
      //   this.replyContent = null
      // }
      // this.$nextTick(_ => {
      //   this.$refs.commentInput.focus()
      // })
    },
    // 滚动加载
    async loadCommit() {
      if (this.isCommentLoad || this.commentsPage.current * this.commentsPage.size >= this.commentsTotal) return
      this.isCommentLoad = true
      this.commentsPage.current++
      const {data: res} = await getCommentPage({
        offerId: this.currentRow.id,
        ...this.commentsPage,
        isPin: this.lookPin
      })
      this.commentsData = this.commentsData.concat(res.data.records)
      this.isCommentLoad = false
    },
    // 显示pin
    async showPin() {
      this.commentsData = []
      this.commentsPage.current = 1
      await this.getCommentPage()
    },
    showCommentInput() {
      // if(this.commentForm.level !== 'COMMENT'){
      //   this.commentForm.content = ''
      // }
      this.isShowCommentInput = true
      this.commentForm.id = null
      this.commentForm.level = 'COMMENT'
      this.replyContent = null
    },
    // 获取分享用户
    async getOfferUserList() {
      const {data: res} = await getOfferUserList(this.offerUserPage.current, this.offerUserPage.size, {
        offerId: this.currentRow.id,
        isShare: false
      })
      this.offerUserList = res.data.records
      this.offerUserTotal = res.data.total
    },
    // 点击分享用户表格
    async handleClickOfferUserRow(row) {
      console.log('分享', row)
      this.offerUserDetailDrawer = true
      const {data: res} = await getUserAccountList(this.userAccountPage.current, this.userAccountPage.size, {
        userId: row.userId,
        offerId: this.currentRow.id
      })
      this.userAccountTotal = res.data.total
      this.userAccountList = res.data.records
    },
    // 用户列表翻页
    handleOfferUserCurrentChange(val) {
      this.offerUserPage.current = val
      this.getOfferUserList()
    },
    // 用户列表选择显示条数
    handleOfferUserSizeChange(val) {
      this.offerUserPage.size = val
      this.getOfferUserList()
    },
    // 用户权限映射值
    transformUserPermission(permission) {
      const base = {
        '1': '查看所有素材审核记录'
      }
      if (permission !== '') {
        const perArr = permission.split(',')
        const nameArr = perArr.map(item => {
          return base[item]
        })
        return nameArr.join(',')
      } else {
        return ''
      }
    },
    // 用户账户权限映射值
    transformUserAccountPermission(permission) {
      const base = {
        '1': '含花费',
        '2': '含点击',
        '3': '含曝光',
        '4': '含安装'
      }
      if (permission !== '') {
        const perArr = permission.split(',')
        const nameArr = perArr.map(item => {
          return base[item]
        })
        return nameArr.join(',')
      } else {
        return ''
      }
    },
    // 获取订单下账户列表
    async getOfferAccountList() {
      const {data: res} = await getAccountList(this.offerAccountPage.current, this.offerAccountPage.size, {
        offerId: this.currentRow.id,
        ...this.queryOfferAccountForm
      })
      // 获取总数
      const {data: {data: {total}}} = await getAccountList(this.offerAccountPage.current, this.offerAccountPage.size, {
        offerId: this.currentRow.id,
      })
      this.offerAccountTotalForMenu = total
      this.offerAccountTotal = res.data.total
      this.offerAccountList = res.data.records
    },
    // 分页
    handleOfferAccountSizeChange(val) {
      this.offerAccountPage.size = val
      this.getOfferAccountList()
    },
    // 翻页
    handleOfferAccountCurrentChange(val) {
      this.offerAccountPage.current = val
      this.getOfferAccountList()
    },
    // 防抖查询
    inputGetOfferAccountList: debounce(function () {
      this.getOfferAccountList()
    }, 1000),
    // 查询外部订单
    async getOfferAccountOuterList() {
      const {data: res} = await getShare2advAccountOuter(this.offerAccountOuterPage.current, this.offerAccountOuterPage.size, this.currentRow.id)
      this.offerAccountOuterList = res.data.records
      if (res.data.records && res.data.records.length > 0) {
        this.shareMenuForm.checkedMenu = res.data.records[0].dataScope.split(',')
      }
    },
    // 获取客户经理
    async getCustomerManagerList() {
      const {data: res} = await getCustomerManager()
      this.customerManagerList = res.data.map(item => {
        return {
          value: item.key,
          label: item.name
        }
      })
    },
    // 获取销售经理
    async getSalesManagerList() {
      const {data: res} = await getSalesManager()
      this.salesManagerList = res.data.map(item => {
        return {
          value: item.key,
          label: item.name
        }
      })
    },
    handlleClickMenu() {
      this.commentsPage.current = 1
      this.getCommentPage()
      this.getOfferUserList()
      this.getOfferAccountList()
      this.getOfferAccountOuterList()
    },
    // 获取订单
    async getOfferList() {
      const {data: res} = await getOffer()
      this.offerList = res.data.map(item => {
        return {
          value: item.key,
          label: item.name
        }
      })
    },
    async delCommit(id, uid) {
      if (this.roles.admin || this.agc_customer_manager || this.userInfo.user_id === uid) { // 删除权限
        const confirm = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
        if (confirm) {
          await removeComment(id)
          await this.getCommentPage()
        }
      } else {
        return this.$message.error('没有权限删除')
      }
    },
    async updateContent() {
      if (this.editContent === '') {
        this.$message.warning('编辑不能为空')
        return
      }
      let result = await updateComment({id: this.editId, content: this.editContent})
      if (result.code !== 200) {
        this.$message.success('编辑成功')
      }

      await this.getCommentPage()


      this.editdialogVisible = false
    },
    async editCommit(id, content, comment) {
      let test = this.commentsData.find(item => item.id === id)['belongToMe']
      let neirong = this.commentsData.find(item => item.id === id)['content']
      console.log(id, content, test, comment)

      if (test) { // 删除权限
        this.editdialogVisible = true
        this.editId = id
        this.editContent = neirong


        // this.commentForm.content = neirong
        // await updateComment(id,this.commentForm.content)
        // await this.getCommentPage()
        // if (comment) {
        //   this.commentForm.id = id
        //   this.commentForm.level = 'REPLY'
        //   this.replyContent = comment
        // } else {
        //   this.commentForm.id = null
        //   this.commentForm.level = 'COMMENT'
        //   this.replyContent = null
        // }
        // this.$nextTick(_ => {
        //   this.$refs.commentInput.focus()
        // })
      } else {
        return this.$message.error('没有权限编辑')
      }
    },
    // 添加定价
    addPricingCfg() {
      // 确保添加顺利清空搜索栏
      this.pricingSearch.countries = []
      this.pricingSearch.platforms = []
      this.pricingSearch.os = []
      // 分页添加从第一条插入，确保添加可以显示在当前页
      this.pricingCfgForm.configuration.splice((this.pricesPage.current - 1) * this.pricesPage.size, 0, {
        platform: [],
        country: [],
        os: [],
        priceType: '',
        price: '',
        startDate: ''
      })
    },
    async savePricing() {
      if (this.pricingCfgForm.configuration.some(item => {
        return item.platform.length === 0 || item.country.length === 0 || item.os.length === 0 || item.priceType === '' || item.price === '' || item.startDate === ''
      })) return this.$message.error('定价配置项不能为空')
      let priceList = cloneDeep(this.pricingCfgForm.configuration);
      priceList.forEach(item => {
        item.offerId = this.selectionList[0].id
        item.platform = item.platform.join(",")
        item.country = item.country.join(",")
        item.os = item.os.join(",")
      })
      let result = await savePriceList(priceList)
      if (result.data == true) {
        this.$message.success('保存定价配置成功')
      }
      this.pricingCfgDrawer = false
    },
    somePricingCfg() {
      const data = cloneDeep(this.pricingCfgForm.configuration[this.pricingCfgForm.configuration.length - 1])
      data.country = []
      this.pricingCfgForm.configuration.push(data)
    },
    // 删除定价
    removePricingCfg(index) {
      this.pricingCfgForm.configuration.splice(index, 1)
      if (this.pricingPageData.length === 0 && this.pricesPage.current > 1) {
        this.pricesPage.current--
      }
    },
    // 打开定价配置
    showPricingCfg() {
      if (this.selectionList.length !== 1) {
        this.$message.warning("请选择一条数据");
        return;
      }
      this.pricesPage.current = 1
      this.pricingCfgDrawer = true
      this.getOfferPricePage()
    },
    closePricingCfgDrawer() {
      this.pricingCfgForm.configuration = [{
        platform: [],
        country: [],
        os: [],
        priceType: '',
        price: '',
        startDate: ''
      }]
    },
    disabledPlateform(value, index) {
      let flag = false
      this.pricingCfgForm.configuration.forEach((item, i) => {
        if (index !== i) {
          if (item.country.some(item => this.pricingCfgForm.configuration[index].country.includes(item)) && item.os.some(item => this.pricingCfgForm.configuration[index].os.includes(item))) {
            flag = true
          }
        }
      })
      if (flag && this.pricingPlatforms.length > 0) {
        return this.pricingPlatforms[0].platforms.includes(value)
      } else {
        return false
      }
    },
    disabledNation(value, index) {
      let flag = false
      this.pricingCfgForm.configuration.forEach((item, i) => {
        if (index !== i) {
          if (item.platform.some(item => this.pricingCfgForm.configuration[index].platform.includes(item)) && item.os.some(item => this.pricingCfgForm.configuration[index].os.includes(item))) {
            flag = true
          }
        }
      })
      if (flag && this.pricingNation.length > 0) {
        return this.pricingNation[0].nations.includes(value)
      } else {
        return false
      }
    },
    disabledOs(value, index) {
      let flag = false
      this.pricingCfgForm.configuration.forEach((item, i) => {
        if (index !== i) {
          if (item.platform.some(item => this.pricingCfgForm.configuration[index].platform.includes(item)) && item.country.some(item => this.pricingCfgForm.configuration[index].country.includes(item))) {
            flag = true
          }
        }
      })
      if (flag && this.pricingOs.length > 0) {
        return this.pricingOs[0].os.includes(value)
      } else {
        return false
      }
    },
    handlePricingCfgSizeChange(val) {
      this.pricesPage.size = val
      this.pricesPage.current = 1
    },
    handlePricingCfgCurrentChange(val) {
      this.pricesPage.current = val
    },
    handleLogSizeChange(val) {
      this.changelogPage.size = val
      this.changelogPage.current = 1
      this.getOfferPriceChangelogPage(this.currentRow.id)
    },
    handleLogCurrentChange(val) {
      this.changelogPage.current = val
      this.getOfferPriceChangelogPage(this.currentRow.id)
    },
    //获取团队
    async getDeptList() {
      const {data: res} = await getWorkrooms()
      this.deptList = res.data.map(item => {
        return {
          label: item.deptName,
          value: item.id
        }
      })
      const createDept = this.option.column.find(item => item.prop === 'team')
      if (createDept !== undefined) {
        createDept.dicData = this.deptList
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.item {
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 6px;

  .el-badge__content.is-fixed {
    top: 0.5em;
    right: 1.5em;
  }
}

.search-circle {
  border-radius: 50%;
  border: 1px solid #dcdfe6;
  width: 30px;
  height: 30px;
  padding: 0;
  margin-right: 0;
}

/deep/ .current-op-row {
  background-color: #f5dab1;
}

/deep/ [searchform] [searchitem] .el-input__inner {
  height: 24px;
  margin-left: -12px;
  width: 195px;
}

/deep/ [searchform] [searchitem] .el-form-item__label {
  text-align: left;
  height: 24px;
}

/deep/ .el-form-item__error {
  margin-top: -50px;
}

/deep/ [searchform] [searchitem] .el-form-item {
  margin: 0px;
  width: unset;
  height: 24px;
}

/deep/ [searchform] [searchitem] .el-form-item__label {
  width: 70px;
  margin: unset;
  height: 24px;
  margin-top: -12px;
}

/deep/ [searchform] [searchitem] .el-form-item__content {
  margin-left: unset;
  width: unset;
  height: 24px;
  line-height: unset;
}

/deep/ [searchform] [searchitem] .el-input--suffix {
  height: 24px;
  margin-left: -12px;
  width: 190px;
}

/deep/ [searchform] [searchitem] .el-input__suffix {
  margin-top: -6px;
}

.drawer__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 90%;

  .drawer__body {
    height: 80%;
    width: 100%;
  }

  .drawer__footer {
    margin-top: 20px;
    z-index: 9999;
  }
}

::v-deep .el-radio-button__inner {
  padding: 7px 35px;
}

.T1 {
  background-color: #FF3A30;
  color: #FFFFFF;
}

.T2 {
  background-color: #FF9502;
  color: #FFFFFF;
}

.T3 {
  background-color: #FFC9A6;
  color: #FFFFFF;
}

.beetles-search-from {
  .el-form-item {
    margin-bottom: unset;

    .el-select {
      width: 100%;
    }
  }
}

.card-header {
  display: flex;
  justify-content: space-between;

  .detail-top {
    * {
      margin-right: 20px;
    }
  }
}

::v-deep .el-card__header {
  border-bottom: unset;
}

.comment-left {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  //padding: 10%;
  padding-right: 20px;
  height: calc(100vh - 166px);

  .commemt-menu-item {
    margin-bottom: 50px;

    ::v-deep .el-radio__inner {
      background-color: #dcdfe6;

      &:after {
        background-color: unset;
      }
    }

    ::v-deep .is-checked {
      .el-radio__inner {
        border-color: #67C23A;
        background: #67C23A;

        &:after {
          background-color: unset;
        }
      }

      .el-radio__label {
        color: #67C23A;
        font-size: 16px;
      }
    }

  }
}

.comment-right {


  .comment-detail {
    margin-top: 0px;

    .detail-item-title {
      text-align: right;
    }

    .comment-box {
      display: flex;
      flex-direction: column;
      height: calc(100vh - 200px);
      //overflow: hidden;

      .comment-msg {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
      }

      .comment-opt {
        height: 150px;
        padding-top: 0px;

        .comment-form {
          display: flex;
          justify-content: space-between;

          * {
            margin: 0 10px;
          }

          #c-content {
            flex: 1;
          }
        }
      }
    }

  }
}

.el-col {
  margin-bottom: 20px;
}

.my-pagination {
  margin-top: 10px;
  margin-bottom: 20px;
  float: right;
}

.user-account-form {
  box-sizing: border-box;
  padding: 10px;
}

.avue-crud {
  ::v-deep .cell {
    overflow: hidden; //溢出内容隐藏
    text-overflow: ellipsis; //文本溢出部分用省略号表示
    display: -webkit-box; //特别显示模式
    -webkit-line-clamp: 2; //行数
    line-clamp: 2;
    -webkit-box-orient: vertical; //盒子中内容竖直排列
  }
}

.comment-detail-wrapper {
  display: flex;

  .comment-detail-wrapper-left {
    flex: 0;
  }

  .comment-detail-wrapper-right {
    flex: 1;
  }
}

.over-flow {
  //width: 100%;
  ////background-color: pink;
  //overflow: hidden !important;				//溢出内容隐藏
  //text-overflow: ellipsis !important;		//文本溢出部分用省略号表示
  //white-space: nowrap !important;
}

.pricing-drawer {
  padding: 0 16px;

  .pricing-offer {
    margin-bottom: 20px;
  }

  .add-btn {
    margin-top: 20px;
  }


}

.pricing-pages {
  margin-top: 15px;
  display: flex;
  justify-content: center;
}

.pricing-show-title {
  margin: 26px 0;
}
</style>
